<template>
  <div class="news-detail-container">
    <h1  class="news-title">
        {{ news.title }}
    </h1>
   
    <div class="news-meta">
      <span class="publish-time">
        发布时间：{{ news.createTime }}
      </span>
    </div>

     <div class="news-content">
      {{ news.content }}
    </div>

      <div class="action-bar">
      <button class="back-button" @click="goBack">
        <i class="icon-arrow-left"></i> 返回列表
      </button>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'NewsDetil',
    data() {
        return {
            news:{
                title:'',
                content:'',
                createTime:''
            }
        }
    },
    created() {
    const id = this.$route.params.id;
    this.fetchNewsDetil(id);
    },
    methods: {
        async fetchNewsDetil(id) {
            try{
                console.log(id);
                const response= await axios.get(`/api/news/getNewsById/${id}`);
                console.log(response);
                this.news={
                    title: response.data.news.title,
                    content: response.data.news.content,
                    createTime:response.data.news.createTime,
                }
            }
            catch(error){
                console.error('获取新闻详情失败:', error);
                this.$message.error('获取新闻详情失败: ' + (error.response?.data?.message || error.message));
            }
        },
         goBack() {
              if (window.history.length > 1) {
                this.$router.go(-1);
                } else {
            this.$router.push('/NewsList'); // 确保路径与你的路由配置一致
            }
         }
    },
    
}
</script>

<style>
.news-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.news-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.4;
  text-align: center;
}

.news-meta {
  text-align: center;
  margin-bottom: 30px;
  color: #666;
  font-size: 14px;
}

.news-content {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  white-space: pre-line; /* 保留换行符 */
  margin-bottom: 40px;
  overflow-wrap: break-word;
}

.action-bar {
  text-align: center;
  margin-top: 40px;
}

.back-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.back-button:hover {
  background-color: #e6e6e6;
  color: #333;
}

.icon-arrow-left::before {
  content: "←";
  margin-right: 5px;
}

</style>